<template>
	<view>
		<swiper class="banner" indicator-dots="true" indicator-color="#E4E4E4" indicator-active-color="#D7A068"
			autoplay="true" circular="true">
			<swiper-item>
                <!-- 图片尺寸750*814 -->
                    <view :style="`background-image:url(${hasHttps()})`" class="banner-img"></view>
            </swiper-item>
		</swiper>

		<view class="good-head">
			<view class="name">
				{{goods.name}}
			</view>
            <!-- <view class="price">
				<text>￥</text>
				<text class="t1">{{goods.price}}</text>
			</view> -->
		</view>

		<view class="detail">
			<view class="title">主题专场介绍</view>
			<view class="cont">
                <uv-parse :content="goods.introduce" :tagStyle="parseStyle"></uv-parse>
			</view>
		</view>
		<view class="footer">
			<view class="btn buy bg-line-color" @click="toCinema()">立即购票</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { getTeamDetail  } from "@/api/baseData"
import { uniConfig } from '@/config/index'
import { useUCenterStore } from '@/stores/uCenter'
const store = useUCenterStore()
const goods = ref<any>({})
const parseStyle = ref<any>(
  {
    // 字符串的形式
    p: 'font-size:32rpx',
    span: 'font-size: 32rpx',
    img:'max-width: 100%;height: auto;'
  }
)
const hasHttps = () => {

    return `${goods.value.logo && goods.value.logo.includes('https:')?goods.value.logo:(uniConfig.ssoPath + goods.value.logo)}`
}
const toCinema = () => {
	uni.setStorageSync('city',{})
	uni.setStorageSync('county',{})
    uni.reLaunch({url:`/pages/movie/index?gameTeamId=${goods.value.id}`})
}

const getDetailInfo = (id : any) => {
    getTeamDetail({teamId:id}).then(res => {
        goods.value = res.data
        uni.setNavigationBarTitle({
            title: res.data.name
        })
    })
}

onLoad((options : any) => {
    if(options.scene){
        const usp = decodeURIComponent(options.scene)
        const params = usp.split('=')
        getDetailInfo(params[1])
    }else getDetailInfo(options.id)
})
</script>
<style lang="scss">
page {
    background-color: #f1f1f1;
    padding-bottom: 160upx;
    box-sizing: border-box;
}

.banner {
    height: 100vw;
    width: 100%;
    
}
.banner-img {
    width: 100vw;
    height:  100vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.good-head {
    margin: 26upx;
    border-radius: 20upx;
    box-sizing: border-box;
    background-color: #fff;
    .name {
		font-size: 32upx;
		font-weight: 600;
		padding:32upx;
		box-sizing: border-box;
	}
}
.shop {
    width: 702upx;
    height: 128upx;
    line-height: 128upx;
    margin: 26upx auto;
    background-color: #fff;
    border-radius: 20upx;
    padding: 0 26upx;
    box-sizing: border-box;
}

.shop .logo {
    width: 82upx;
    height: 82upx;
    border-radius: 50%;
    margin-top: 23upx;
    float: left;
}

.shop .shopName {
    display: inline-block;
    font-size: 32upx;
    color: #565656;
    margin-left: 17upx;
    width: 400upx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop .more {
    float: right;
    height: 50upx;
    line-height: 50upx;
    width: 145upx;
    margin-top: 39upx;
    text-align: center;
    color: #DA9B65;
    font-size: 24upx;
    border: 1px solid #DA9B65;
    border-radius: 50upx;
}

.about {
    width: 702upx;
    margin: 26upx auto;
    background-color: #fff;
    border-radius: 20upx;
    padding: 0 26upx 10upx 26upx;
    box-sizing: border-box;

}

.about .title {
    line-height: 88upx;
    font-size: 32upx;
    font-weight: bold;
}

.about .list {
    width: 100%;
    height: 390upx;
}

.about .list .list_item {
    display: flex;
    justify-content: space-around;
}

.about .list .list_item .item {
    width: 200upx;
}

.about .list .list_item .item .img {
    width: 200upx;
    height: 200upx;
    border-radius: 10upx;
    display: block;
    margin: 0 auto;
}


.about .list .list_item .item .name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 30upx;
    font-size: 24upx;
    margin: 14upx 0;
}

.about .list .list_item .item .price {
    color: #FA4323;
    font-size: 24upx;
}

.about .list .list_item .item .price text {
    font-size: 32upx;
}

.detail {
    margin: 26upx;
    border-radius: 20upx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 9px;
}

.detail .cont{
    padding:0 32rpx 32rpx;
}

.detail .title {
    font-size: 32upx;
    font-weight: bold;
    padding:32upx;
    background-color: #fff;
    border-top-left-radius: 20upx;
    border-top-right-radius: 20upx;
}

.detail .cont .img {
    width: 100%;
    display: block;
}

.footer {
    height: 135upx;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    text-align: center;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 0 24upx;
    z-index: 11;
}

.footer .collect {
    padding-top: 28upx;
    font-size: 22upx;
}

.footer .collect .iconfont {
    display: block;
    font-size: 33upx;
    margin-bottom: 5upx;
}

.footer .collect .icon-shoucang-shoucang {
    color: #F3AC67;
}

.footer .btn {
    width: 98%;
    height: 88upx;
    line-height: 88upx;
    margin-top: 16upx;
    font-size: 32upx;
    border-radius: 50upx;
}

.footer .share {
    background-color: #F9D5B3;
    color: #CA812F;
}

.footer .buy {
    background-color: #F7432B;
    color: #fff;
}


.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
    background: rgba(0, 0, 0, 0.5);
}

.shareBox {
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    border-top-left-radius: 42upx;
    border-top-right-radius: 42upx;
}

.shareBox .top {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 22upx 0;
}

.shareBox .top .btn {
    font-size: 25upx !important;
    font-weight: normal !important;
    background-color: #fff;
    text-align: center;
    color: #333333;
}

.shareBox .top .btn::after {
    border: none !important;
}

.shareBox .top .btn .icon {
    height: 100upx;
    display: block;
    margin: 0 auto 19upx auto;
}

.shareBox .closeBtn {
    width: 670upx;
    text-align: center;
    font-size: 28upx;
    background-color: #ffffff;
    line-height: 100upx;
    border-radius: 50upx;
    color: #666666;
    margin: 0 auto;
}

.panel {
    width: 702upx;
    margin: 22upx auto;
    background-color: #fff;
    border-radius: 20upx;
    font-size: 28upx;
}

.panel .title {
    padding: 26upx 34upx;
    font-weight: bold;
}

.panel .cont {
    padding: 0 34upx 26upx 34upx;
}

.panel .cont .titl {
    color: #666666;
    margin-top: 28upx;
}

.panel .cont .p {
    color: #999999;
}

.noMore {
    text-align: center;
    color: #999999;
    font-size: 28upx;
    margin: 28upx 0;
}

</style>